<template>
  <div class="vocabulary-search">
    <div class="search-container">
      <el-input v-model="searchTerm" placeholder="请输入要搜索的单词" @keyup.enter="performSearch" clearable
        class="search-input">
        <template #append>
          <el-button @click="performSearch" class="search-button">搜索</el-button>
        </template>
      </el-input>
    </div>

    <!-- 最近搜索的单词 -->
    <div v-if="recentSearches.length > 0" class="recent-searches detail-card">
      <div class="tags-container recent-container">
        <el-tag v-for="(word, index) in recentSearches" :key="'recent-' + index" type="info" class="word-tag" closable
          @click="searchRecentWord(word)" @close="removeRecentSearch(index)">
          {{ word }}
        </el-tag>
      </div>
    </div>

    <div v-if="loading" class="loading">
      <el-skeleton :rows="5" animated />
    </div>

    <div v-else-if="error" class="error">
      <el-alert :title="error" type="error" show-icon :closable="false" />
    </div>

    <!-- 查询词详情 -->
    <div v-else-if="searchedWordDetail" class="searched-word-detail detail-card">
      <WordDetailDisplay :word-data="searchedWordDetail" @play-pronunciation="playPronunciation" />
      <el-alert v-if="searchedWordDetail.message" :title="searchedWordDetail.message" type="success"
        :closable="false" />
    </div>

    <div v-if="Object.keys(searchResults).length > 0" class="search-results">
      <!-- 相似词汇 -->
      <div v-if="searchResults.similar && searchResults.similar.length > 0" class="result-section detail-card">
        <h3>相似词汇</h3>
        <div class="tags-container">
          <el-tag v-for="(word, index) in searchResults.similar" :key="'similar-' + index" type="primary"
            class="word-tag"
            @click="showWordDetail(typeof word === 'object' ? { vocabulary: word.word } : { vocabulary: word })">
            <div v-html="styleWord(typeof word === 'object' ? word.word : word, searchTerm)"></div>
          </el-tag>
        </div>
      </div>

      <!-- 前缀词汇 -->
      <div v-if="searchResults.prefix && searchResults.prefix.length > 0" class="result-section detail-card">
        <h3>前缀词汇</h3>
        <div class="tags-container">
          <el-tag v-for="(word, index) in searchResults.prefix" :key="'prefix-' + index" type="success" class="word-tag"
            @click="showWordDetail({ vocabulary: word })">
            <div v-html="styleWord(word, searchTerm, { fullWord: true })"></div>
          </el-tag>
        </div>
      </div>

      <!-- 后缀词汇 -->
      <div v-if="searchResults.suffix && searchResults.suffix.length > 0" class="result-section detail-card">
        <h3>后缀词汇</h3>
        <div class="tags-container">
          <el-tag v-for="(word, index) in searchResults.suffix" :key="'suffix-' + index" type="warning" class="word-tag"
            @click="showWordDetail({ vocabulary: word })">
            <div v-html="styleWord(word, searchTerm, { fullWord: true })"></div>
          </el-tag>
        </div>
      </div>

      <!-- 包含词汇 -->
      <div v-if="searchResults.contains && searchResults.contains.length > 0" class="result-section detail-card">
        <h3>包含词汇</h3>
        <div class="tags-container">
          <el-tag v-for="(word, index) in searchResults.contains" :key="'contains-' + index" type="danger"
            class="word-tag" @click="showWordDetail({ vocabulary: word })">
            <div v-html="styleWord(word, searchTerm, { color: 'blue', fullWord: true })"></div>
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 单词详情弹窗 -->
    <WordDetailDialog :visible="showWordDetailDialog" :word="selectedWord"
      @update:visible="showWordDetailDialog = $event" @close="closeWordDetail" />
  </div>
</template>

<script>
import { vocabularySearchMixin } from '@/mixins/vocabularySearch'
import WordDetailDialog from '@/components/vocabulary/WordDetailDialog.vue'
import WordDetailDisplay from '@/components/vocabulary/WordDetailDisplay.vue'
import { ElPageHeader, ElInput, ElButton, ElTag, ElSkeleton, ElAlert, ElEmpty } from 'element-plus'

export default {
  name: 'VocabularySearch',
  components: {
    ElPageHeader,
    ElInput,
    ElButton,
    ElTag,
    ElSkeleton,
    ElAlert,
    ElEmpty,
    WordDetailDialog,
    WordDetailDisplay
  },
  mixins: [vocabularySearchMixin]
}
</script>

<style scoped lang="scss">
@use '@/assets/styles/vocabularySearch.scss';
</style>